<template>
	<view id="index">
		<view class="content">
			<view class="imges">
				<view v-if="isLogin">
					<image class="img" src="/static/image/user/user.png"  @click="login()" mode="widthFix"></image>
					<p>{{user}}</p>
				</view>
				<view v-else>
					<image class="img" src="/static/image/user/head0.png"  @click="login()" mode="widthFix"></image>
					<p>点击头像登录~</p>
				</view>
			</view>
			<view class="l">
				<view class="list" v-for="data in datalist" :key="data.word">
					<image class="icon" :src="data.src"></image>
					<text>{{data.word}}</text><text class="jt">></text>
				</view>
			</view>
			<view class="setting">
				<view class="list">
					<image class="icon" src="/static/image/icon/icon5.png"></image>
				<text>设置</text><text class="jt">></text>
				</view>
			</view>
			<view class="bt">
				<view v-show="isLogin" @click="logout()" class="message">{{message}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import con from 'pages/const.js'
	export default {
		data() {
			return {
				message: '注销账号',
				datalist:[
					{src:'/static/image/icon/icon1.png',word:'账号中心'},
					{src:'/static/image/icon/icon2.png',word:'邮箱提醒'},
					{src:'/static/image/icon/icon3.png',word:'常见问题'},
					{src:'/static/image/icon/icon4.png',word:'联系我们'},
				]
			}
		},
		computed:{
			isLogin(){
				return this.$store.state.isLogin
			},
			user(){
				return this.$store.state.user
			}
		},
		methods: {
			login() {
				if (!this.isLogin)
					uni.navigateTo({
						url: '/pages/user/login'
					})
			},
			logout(){
				if (this.isLogin){
					uni.removeStorageSync('deng');
					uni.removeStorageSync('user');
					this.$store.commit('logout')
					uni.showToast({
						'title': '注销成功'
					});
					uni.request({
						url: con.request_ip + '/login/logout',
						method: 'GET',
					})
				}
			}
		}
	}
</script>
<style scoped>
	#index{
		color: #514f4f;
		width: 100vw;
		height: 100vh;
		background-color: #f4f4f4;
		top: var(--status-bar-height);
	}
	.img {
		width: 200rpx;
		height: 200rpx;
	}
	.icon{
		position: relative;
		height:74rpx;
		width: 74rpx;
		padding: 0 22rpx 0 0;
		top: -12rpx;
	}
	.content {
		position: relative;
		top: 10%;
		font-size: 32rpx;
	}
	.imges {
		text-align: center;
	}
	p{
		font-size: 40rpx;
	}
	li {
		list-style-type: none;
	}
	.l{
		position: relative;
		top: 86rpx;
		background-color:white;
	}
	.list {
		position: relative;
		left: 5%;
		width: 95%;
		height: 64rpx;
		display: flex;
		padding: 42rpx 0 22rpx 0;
	}
	.setting{
		position: relative;
		background-color: white;
		top: 112rpx;
	}
	.jt {
		position: absolute;
		color: #999;
		right: 3%;
	}
	.bt {
		position: relative;
		top: 160rpx;
		left: 10%;
		width: 80%;
		text-align: center;
	}
	.message {
		padding: 16rpx 0;
		border-radius: 20rpx;
		background: #2db7f5;
	}
</style>
